<template>
  <div class="login-page">
    <div class="Login">
      <el-form ref="form" class="form" :model="form" label-width="60px" :rules="form_rule">
        <h3>系统登录{{ baseEnv !== 'production' ? '测试' : '' }}</h3>

        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入账号"/>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
        </el-form-item>

        <el-form-item label="验证码" prop="verify_code.code">
          <graphic-verification-code
            ref="verification-code-ref"
            v-model="form.verify_code"
            @keyup.enter.native="submit"
          />
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button type="primary" style="width: 50%; margin-left: -80px" :disabled="submitDisabled" @click="submit"> 登
            录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import GraphicVerificationCode from '@/components/common/GraphicVerificationCode';
import { validateForm } from '@/utils/validate';
import { GetToken } from '@/api';
import store from '@/store'
import { GetUser } from '@/api/user';

export default {
  name: 'Login',
  components: { GraphicVerificationCode },
  data() {
    return {
      baseEnv: process.env.VUE_APP_ENV,
      form: {
        username: '',
        password: '',
        verify_code: {
          'code': '',
          'key': ''
        }
      },
      form_rule: {
        username: [{ required: true, message: '请输入账号', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        'verify_code.code': [{ required: true, message: '请输入验证码', trigger: 'change' }]
      },
      submitDisabled: false
    }
  },
  methods: {
    async submit() {
      this.submitDisabled = true;
      const form_valid = await validateForm(this.$refs.form)
      if (!form_valid) {
        this.submitDisabled = false;
        // this.$message.warning(`请检查表单`)
        return
      }

      GetToken(
        this.$data.form.username,
        this.$data.form.password,
        this.$data.form.verify_code.key,
        this.$data.form.verify_code.code
      ).then(response => {
        if (response.code === 200 && response.success === true) {
          this.submitDisabled = false;
          this.set_token(response.data)
          this.set_user_info(response.data.userId);
          this.$message.success(`登录成功`);
          this.$router.push('/welcome');
          // this.$router.push('/manager');
        } else {
          this.submitDisabled = false;
          this.$refs['verification-code-ref'].get_img();
        }
      }).catch(err => {
        if (err.code === 400) {
          // this.$message.error('账号或验证码错误');
        }
        this.submitDisabled = false;
        this.$refs['verification-code-ref'].get_img();
      })
    },
    set_token(data) {
      store.commit('user/setUserToken', data)
      window.localStorage.setItem('user_token', JSON.stringify(data))
    },
    async set_user_info(userId) {
      const response = await GetUser(userId)
      store.commit('user/setUserInfo', response.data)
      window.localStorage.setItem('user_info', JSON.stringify(response.data))
    }
  }
}
</script>

<style lang="less" scoped>

.login-page {
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/login-bg.jpg');
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .Login {
    //width: 500px;
    width: 33%;
    border: 1px solid #eaeaea;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;

    h3 {
      font-weight: bold;
      margin-bottom: 40px;
      text-align: center;
      color: #505458;
    }
  }
}

</style>
